<template>
  <div id="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="通过考题ID进行搜索" v-model="input1">
          </el-input
        ></el-col>
        <el-col :span="3"
          ><el-select
            v-model="value"
            clearable
            placeholder="通过考题类型进行搜索"
            style="width: 100%"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="3"
          ><el-input placeholder="通过考题内容进行搜索" v-model="input1">
          </el-input
        ></el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search"></el-button>
        </el-col>
        <el-col :span="2" :offset="11">
          <el-button type="primary" icon="el-icon-plus" style="float: right;" @click="jumpToAdd()"></el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;height: calc(100% - 60px - 40px);margin-top: 10px;overflow: auto;"
      border
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="正确答案">
              <template v-if="props.row.type == 3">
                <div v-if="props.row.rightAnswersContent == 1">
                  <i
                    class="el-icon-check"
                    style="color: green; font-size: 18px; font-weight: bold"
                  ></i>
                </div>
                <div v-if="props.row.rightAnswersContent == 0">
                  <i
                    class="el-icon-close"
                    style="color: red; font-size: 18px; font-weight: bold"
                  ></i>
                </div>
              </template>
              <template v-else>
                <div
                  style="color: green"
                  v-html="props.row.rightAnswersContent.replace(/\|/g, '<br/>')"
                ></div>
              </template>
            </el-form-item>
            <el-form-item v-if="props.row.wrongAnswersContent" label="错误答案">
              <div
                style="color: red"
                v-html="props.row.wrongAnswersContent.replace(/\|/g, '<br/>')"
              ></div>
            </el-form-item>
            <el-form-item label="解析">
              <div>{{ props.row.analysis || "无" }}</div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="考题 ID" prop="id" width="100"> </el-table-column>
      <el-table-column
        label="考题类型"
        prop="typeStr"
        width="100"
      ></el-table-column>
      <el-table-column label="考题内容" prop="content"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="props">
          <el-button-group>
            <el-button type="primary" icon="el-icon-edit" @click="jumpToEdit(props.row.id)"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import { showLoading } from "@/utils/util";
export default {
  name: "QuestionManager",
  data() {
    return {
      typeOptions: [
        {
          value: 1,
          label: "单选题",
        },
        {
          value: 2,
          label: "多选题",
        },
        {
          value: 3,
          label: "判断题",
        },
        {
          value: 4,
          label: "填空题",
        },
        {
          value: 5,
          label: "简答题",
        },
      ],
      tableData: [],
      page: 1,
      size: 100,
      total: 0,
    };
  },
  methods: {
    /**
     * 获取数据
     */
    getData() {
      const loading = showLoading(this);
      request({
        url: "/api/question/list",
        method: "GET",
        params: {
          page: this.page,
          size: this.size,
          deleteFlag: "1",
          orderBy: JSON.stringify({ id: "asc" }),
        },
      }).then((res) => {
        console.log("res", res);
        this.tableData = res.data.data;
        this.total = res.data.total;
        loading.close();
      });
    },
    jumpToAdd() {
      this.$router.push("/questionAdd");
    },
    /**
     * 选择每页条数
     */
    handleSizeChange(size) {
      this.size = size;
      this.getData();
    },
    /**
     * 切换条数
     */
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss">
#container {
  // height: 70vh;
  width: 90%;
  height: 85%;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;

  .demo-table-expand {
    font-size: 0;

    label {
      width: 90px;
      color: #99a9bf;
    }

    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 100%;
    }
  }

  .block {
    margin-top: 10px;
  }
}
</style>
